<template>
  <h1>EL-菜单组件</h1>
<!--@select="handleSelect" 菜单选中事件  -->
  <el-menu mode="horizontal" @select="handleSelect"
  background-color="lightblue" default-active="2"
  text-color="purple" active-text-color="yellow">
    <el-menu-item index="1">菜单</el-menu-item>
    <el-menu-item index="2">直播课</el-menu-item>
    <el-menu-item index="3">线上课</el-menu-item>
    <el-menu-item index="4">脱产课</el-menu-item>
    <el-menu-item index="5">实训课</el-menu-item>


    <el-sub-menu index="6">
      <template #title>联系我们</template>
      <el-menu-item index="6-1">QQ</el-menu-item>
      <el-menu-item index="6-2">微信</el-menu-item>
      <el-menu-item index="6-3">视频号</el-menu-item>
    </el-sub-menu>

  </el-menu>

</template>

<script setup>
//index指的是用户选择的是那个菜单项 对应菜单项index的值，比如5 表示选择了实训课
//indexPath 指的是如何到达当前的这个菜单项，比如6 6-2可到达微信
const handleSelect = (index,indexPath)=>{
  console .log(index,indexPath);
}

</script>


<style scoped>

</style>